<template>
  <lay-layer v-model="visible" :shade="true" :shadeClose="false" shadeOpacity="0.2" :area="['1000px', '630px']" :success="init" :btn="action">
    <div style="padding: 10px">
      <lay-form style="margin-top: 10px" :model="searchQuery" ref="queryRef">
        <lay-row>
          <lay-col :md="8">
            <lay-form-item label="触发动作" prop="status">
              <lay-select class="search-input" v-model="searchQuery.jobAction" :allow-clear="true" placeholder="请选择">
                <lay-select-option value="manual" label="手动"></lay-select-option>
                <lay-select-option value="auto" label="自动"></lay-select-option>
              </lay-select>
            </lay-form-item>
          </lay-col>
          <lay-col :md="8">
            <lay-form-item label="执行结果" prop="status">
              <lay-select class="search-input" v-model="searchQuery.jobResult" :allow-clear="true" placeholder="请选择">
                <lay-select-option value="success" label="成功"></lay-select-option>
                <lay-select-option value="fail" label="失败"></lay-select-option>
              </lay-select>
            </lay-form-item>
          </lay-col>
          <lay-col :md="8">
            <lay-form-item label-width="20">
              <lay-button style="margin-left: 20px" type="primary" @click="showPageJobLog()"> 查询 </lay-button>
              <lay-button @click="toReset(queryRef,showPageJobLog)"> 重置 </lay-button>
            </lay-form-item>
          </lay-col>
        </lay-row>
      </lay-form>
      <!-- table -->
      <div class="table-box">
        <lay-table
            :page="fxwPage.page"
            :height="'100%'"
            :columns="columns"
            :loading="fxwPage.loading.value"
            :default-toolbar="true"
            :data-source="fxwPage.dataSource.value"
            v-model:selected-keys="fxwPage.selectedKeys.value"
            @change="showPageJobLog">
        </lay-table>
      </div>
    </div>
  </lay-layer>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import useFxwForm from "@/hooks/useFxwForm";
import useFxwPage from "@/hooks/useFxwPage";
import {pageJobLog,detailJobLog} from "@/api/module/jobLog";

const {changeVisible,visible,toReset} = useFxwForm()

const fxwPage = useFxwPage();
const props = defineProps({
  id:{
    type: Number,
    default: 0
  }
});
const formRef = ref();
const queryRef = ref();
const searchQuery = ref({
  jobId: 0,
  jobAction: '',
  jobResult: '',
  pageNumber: 1,
  pageSize: 10,
});
// 初始化
const init = ()=> {
  showPageJobLog();
}

// 日志分页
const showPageJobLog = (cp:any = fxwPage.page) => {
  searchQuery.value.jobId = props.id;
  searchQuery.value.pageNumber = cp.current;
  searchQuery.value.pageSize = cp.limit;
  fxwPage.loading.value = true;
  pageJobLog(searchQuery.value).then(res=>{
    fxwPage.dataSource.value = res.data.records;
    fxwPage.loading.value = false;
    fxwPage.page.total = res.data.totalRow;
  })

};

// 参数文档
const columns = ref([
  { title: 'ID', width: '80px', key: 'id', fixed: 'left' },
  { title: '任务ID', width: '120px', key: 'jobId' },
  { title: '参数', key: 'jobParams' },
  { title: '触发动作', width: '120px', key: 'jobAction' },
  { title: '执行结果', width: '120px', key: 'jobResult',},
  { title: '开始时间', width: '100px', key: 'jobStartTime' },
  { title: '结束时间', width: '100px', key: 'jobEndTime' },
  { title: '耗时（ms）', width: '100px', key: 'jobUseTime' },
])


const action = ref([
  {
    text: "关闭",
    callback: () => {
      changeVisible();
    }
  }
])


const jsonFormat = (jsonStr: string)=>{
  // 1、JSON.parse：把JSON字符串转换为JSON对象
  // 2、JSON.stringify：把JSON对象 转换为 有缩进的 JSON字符串格式

  const ab = JSON.stringify(JSON.parse(jsonStr), null, '\t');
  console.log(ab)
  return ab;
};

defineExpose({
  changeVisible
})

</script>

<style scoped>



</style>